<template>
	<view class="content">
		<view class="con-top">
			{{audioList[audioActiveIndex].title || ''}}
		</view>
		<image src="../../static/icon/pian.png"
			style="width: 40px;height: 50px;position: absolute;z-index: 22;left:88px;top: 50px;"></image>
		<view>
			<image src="../../static/icon/changpian.png" style="width: 100px;height: 100px;"
				:class="isPaused?'animation':'animationActive'"></image>
			<view
				style="position: absolute;top: 85px;right:144px;z-index:23;width: 34px;background-color: #000;height: 34px;border-radius: 50%;">
				<image src="../../static/logo.png" style="width: 33px;height:45px;"></image>
			</view>

		</view>
		<view class="audio-content">
		
			<!-- 调速拉条区 -->
			<view class="audio-progress">
				<!-- <image src="../../static/audio/get-back.svg" @click="onSeek(-15)"></image> -->
				<view class="audio-bar">
					<slider class="audio-slider" :value="currentTime" :min="0" :max="duration" @change="sliderChange"
						@changing="sliderChanging" activeColor="#fe4401" backgroundColor="#DAE0E6" block-color="#343434"
						block-size="18" />
				</view>
				<!-- <image src="../../static/audio/fast-forward.svg" @click="onSeek(15)"></image> -->
			</view>
			<!-- 显示时间进度区 -->
			<view class="bar-tips">
				<text>{{minTimeFmt(currentTime)}}</text>
				<text>{{minTimeFmt(duration)}}</text>
			</view>

			<view class="play-box">
				<image src="../../static/audio/last-episode.svg" @tap="onSwitchAudio(audioActiveIndex - 1)"></image>
				<view class="play-btn" :style="{backgroundColor:isPaused?'':'#475266'}" @click="onPlayPause">
					<image v-show="isPaused" src="../../static/audio/suspend.svg"></image>
					<image v-show="!isPaused" src="../../static/audio/start.svg"></image>
				</view>
				<image src="../../static/audio/next-set.svg" @tap="onSwitchAudio(audioActiveIndex + 1)"></image>
			</view>

			<!-- 按钮区 -->
			<view class="audio-btn">
				<image v-if="!showAudioListIcon"></image>
				<view v-if="showAudioOrderIcon" class="btn-order">
					<image src="../../static/audio/play-list.svg">
					</image>
					<text class="play-list-text">正序播放</text>
				</view>
				<view v-if="showAudioListIcon" class="btn-order">
					<image src="../../static/audio/liebiao.svg" @tap="goList">
					</image>
					<text class="play-list-text" @tap="goList">{{audioList.length}}集</text>
				</view>

				<view class="btn-order">
					<image src="../../static/audio/clock.svg">
					</image>
					<text class="play-list-text" @tap="onOpenOrder">定时关闭</text>
				</view>
				<view v-if="showAudioSpeedIcon" class="btn-order">
					<image src="../../static/audio/bei.svg">
					</image>
					<text class="play-list-text" @tap="onSpeed">{{speed.toFixed(1)}}倍</text>
				</view>
			</view>
			<view class="con-btn">
				<uni-icons :type="form.like?'heart-filled':'heart'" @click="()=>form.like=!form.like"></uni-icons>
				<text style="margin:0 0 0 8rpx">收藏</text>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#565656" borderRadius="10rpx">
			<view class="popup-content">
				<image src="../../static/audio/clock.svg" style="width:18px;height: 18px;"></image>
				<view v-for="(item,index) in coutList " style="margin: 0 10rpx;" @click="changeCout(index)">
					<text :class="coutIndex==index?'textActive':''">{{item}}分钟</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupBei" background-color="#565656" borderRadius="10rpx">
			<view class="popup-content">
				<image src="../../static/audio/bei.svg" style="width:18px;height: 18px;"></image>
				<view v-for="(item,index) in muliList " style="margin: 0 10rpx;" @click="changeBei(index)">
					<text :class="beiIndex==index?'textActive':''">{{item.toFixed(1)}}倍</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: "《西游记》新版",
					audio: "",
					like: false,
					jishu: 105
				},
				audioData: [],
				// 当前播放的位置索引
				activeIndex: -1,
				// 是否显示播放列表
				showAudioListIcon: true,
				//是否显示播放顺序
				showAudioOrderIcon: true,
				// 是否显示播放倍速
				showAudioSpeedIcon: true,
				// 是否自动播放
				autoplay: false,
				isPaused: false, //是否暂停中
				duration: 0, //音频时长
				currentTime: 0, //当前时长
				audioActiveIndex: -1, //当前播放索引
				speed: 1, //倍速
				isSlidering: false, //是否移动中
				isEndAcudio: false, //最后一个音频结束
				audioList: [
					// {title:'',image:'',fileUrl:''}
				],
				isAutoplay: false,
				coutList: [1, 3, 5, 10, 15],
				muliList: [0.5, 1.0, 1.5, 2.0],
				beishu: 1.0,
				coutdown: 0,
				beiIndex: 0,
				coutIndex: 0,
				innerAudioContext: null,
				content: [],
				option: {},
			};
		},
		onLoad(option) {
			this.option = option
			this.innerAudioContext = uni.createInnerAudioContext()
			this.initAudioInfo()
		},
		mounted() {
			this.$nextTick(() => {
				this.startPlay();
				if (this.option.type == 1) {
					this.content = uni.getStorageSync('story')
					this.audioList = this.content.filter(x => x.id == this.option.storyId)[0].content
				} else {
					this.content = uni.getStorageSync('poem')
					this.audioList = this.content
				}
				this.audioActiveIndex = this.audioList.findIndex(item => item.id == this.option._id);
				//初始化数据
				// this.initAudio()
				this.setAudioInfo();
			})
		},
		methods: {
			minTimeFmt(val) {
				let minute = parseInt(val / 60);
				let seconds = Math.ceil(val % 60)
				return `${minute>=10?minute:'0'+minute}:${seconds>=10?seconds:'0'+seconds}`
			},
			startPlay() {
				// #ifdef H5
				this.innerAudioContext = uni.createVideoContext('le-audio');
				// #endif
				// #ifdef APP
				this.innerAudioContext = uni.createInnerAudioContext();
				// #endif
				// #ifndef H5 || MP-ALIPAY || MP-LARK
				this.innerAudioContext = uni.getBackgroundAudioManager();
				// #endif
				/*
				play		播放（H5端部分浏览器需在用户交互时进行）	
				pause		暂停	
				stop		停止	
				seek	position	跳转到指定位置，单位 s	
				destroy		销毁当前实例
				*/
				this.innerAudioContext.startTime = 0; //开始播放的位置（单位：s）
				this.setAudioInfo();
				// #ifdef H5
				this.innerAudioContext.playbackRate(1.0);
				// #endif
				// #ifndef H5
				this.innerAudioContext.playbackRate = this.speed; //放的倍率。可取值：0.5/0.8/1.0/1.25/1.5/2.0
				// 音频播放事件
				this.innerAudioContext.onPlay(() => {
					this.onPlay();
				});
				// 音频暂停事件
				this.innerAudioContext.onPause(() => {
					this.onPause();
				});
				// 音频进入可以播放状态，但不保证后面可以流畅播放
				this.innerAudioContext.onCanplay(() => {
					this.onCanplay();
				});
				// 音频自然播放结束事件
				this.innerAudioContext.onEnded(() => {
					this.onEnded();
				});
				// 音频播放错误事件
				this.innerAudioContext.onError((res) => {
					this.onError(res)
				});
				// 音频播放进度更新事件
				this.innerAudioContext.onTimeUpdate(() => {
					this.setPlayData();
				});
				// #endif
				// #ifndef H5 || MP-ALIPAY || MP-LARK
				// 用户在系统音乐播放面板点击上一曲事件（iOS only）
				this.innerAudioContext.onPrev(() => {
					// 切换到上一个音频
					this.onSwitchAudio(this.audioActiveIndex - 1);
					// console.log("用户在系统音乐播放面板点击下一曲事件（iOS only）");
				});
				// 用户在系统音乐播放面板点击下一曲事件（iOS only）
				this.innerAudioContext.onNext(() => {
					// 切换到下一个音频
					this.onSwitchAudio(this.audioActiveIndex + 1);
					// console.log("用户在系统音乐播放面板点击下一曲事件（iOS only）");
				});
				// #endif
			},
			// 暂停播放切换
			onPlayPause() {
				if (this.isPaused) {
					if (this.isEndAcudio) {
						this.innerAudioContext.title = this.audioList[this.audioActiveIndex]?.title;
						this.innerAudioContext.coverImgUrl = this.audioList[this.audioActiveIndex]?.image;
						this.innerAudioContext.src = encodeURI(this.audioList[this.audioActiveIndex]?.fileUrl).replace(
							/\+/g,
							"%2B"); //音频的数据链接，用于直接播放。
					}
					this.innerAudioContext.play()
					this.isPaused = false;
				} else {
					this.innerAudioContext.pause()
					this.isPaused = true;
				}
			},
			// 切换音频
			onSwitchAudio(index) {
				if (index < 0 || index >= this.audioList.length || this.audioActiveIndex === index) {
					return;
				}
				this.audioActiveIndex = index;
				this.isPaused = true
				this.setAudioInfo();
			},
			// 调整播放倍速
			onSpeed() {
				this.$refs.popupBei.open("center")
			},
			// 调整播放位置
			onSeek(num) {
				if (!this.innerAudioContext.currentTime) return;
				let seekNum = num + this.innerAudioContext.currentTime;
				this.isSlidering = true;
				if (seekNum < 0) {
					// 调整后时间小于0
					this.currentTime = 0;
					this.innerAudioContext.seek(0)
				} else if (seekNum > this.innerAudioContext.duration) {
					// 调整后时间大于总时长
					this.currentTime = this.innerAudioContext.duration;
					this.innerAudioContext.seek(this.innerAudioContext.duration)
				} else {
					this.currentTime = seekNum;
					this.innerAudioContext.seek(seekNum)
				}
			},
			// 滑块滚动到的位置
			sliderChange(e) {
				this.isSlidering = false;
				this.currentTime = e.detail.value;
				this.innerAudioContext.seek(e.detail.value);
			},
			// 滑块滚动到的位置 实时
			sliderChanging(e) {
				this.isSlidering = true;
				this.currentTime = e.detail.value;
			},
			// 设置以及转换信息
			setPlayData(event) {
				// #ifndef H5
				if (this.isSlidering) return;
				if (!this.innerAudioContext.duration && !this.innerAudioContext.currentTime) return;
				this.duration = this.innerAudioContext.duration || 0;
				this.currentTime = this.innerAudioContext.currentTime || 0;
				// #endif
				// #ifdef H5
				if (this.isSlidering) return;
				this.duration = event.detail.duration || 0;
				this.currentTime = event.detail.currentTime || 0;
				// #endif
			},
			// 设置播放
			setAudioInfo() {
				if (this.innerAudioContext && this.audioActiveIndex > -1 && this.audioList[this.audioActiveIndex]
					?.fileUrl) {
					this.innerAudioContext.title = this.audioList[this.audioActiveIndex]
						?.title; //音频标题，用于做原生音频播放器音频标题。
					this.innerAudioContext.src = encodeURI(this.audioList[this.audioActiveIndex]?.fileUrl).replace(/\+/g,
						"%2B"); //音频的数据链接，用于直接播放。
					if (this.isAutoplay || this.autoplay) {
						this.innerAudioContext.play();
					} else {
						setTimeout(() => {
							this.innerAudioContext.pause();
						}, 100)
						this.isAutoplay = true;
					}
				}
				if (!this.audioList[this.audioActiveIndex]?.fileUrl) {
					this.duration = 0;
					this.currentTime = 0;
					this.isPaused = true;
					this.innerAudioContext.pause();
				}
			},
			// 播放事件
			onPlay() {
				console.log('音频播放事件');
				this.isEndAcudio = false;
				this.isSlidering = false;
				this.isPaused = false;
			},
			// 暂停事件
			onPause() {
				// console.log("音频暂停事件");
				this.isPaused = true;
			},
			// 播放结束事件
			onEnded() {
				// 是否最后一个音频
				if (this.audioActiveIndex + 1 >= this.audioList.length) {
					// console.log("最后一个音频")
					this.currentTime = 0;
					this.isPaused = true;
					this.isEndAcudio = true;
					return;
				}
				// 切换到下一个音频
				this.onSwitchAudio(this.audioActiveIndex + 1);
				// console.log("音频自然播放结束事件");
			},
			// 音频进入可以播放状态
			onCanplay(event) {
				// console.log('音频进入可以播放状态，但不保证后面可以流畅播放');
				// console.log("音频时长：", innerAudioContext.duration)
				this.isSlidering = false;
				this.setPlayData(event);
			},
			// 播放失败
			onError(res) {
				// console.log("音频播放错误事件", res);
				this.duration = 0;
				this.currentTime = 0;
				this.isPaused = true;
				this.innerAudioContext.pause();
			},
			//定时关闭弹窗 
			onOpenOrder() {
				this.$refs.popup.open("center")
			},
			changeCout(i) {
				this.coutIndex = i
				this.$refs.popup.close()
			},
			// 调整播放倍速
			changeBei(i) {

				this.innerAudioContext.playbackRate(this.muliList[i]);
				this.speed = this.muliList[i];


				// if (this.speed == 1) {
				// 	// #ifdef H5
				// 	this.innerAudioContext.playbackRate(1.5);
				// 	this.speed = 1.5;
				// 	// #endif
				// 	// #ifndef H5
				// 	this.innerAudioContext.playbackRate = 2.0;
				// 	this.speed = 2;
				// 	// #endif
				// } else {
				// 	// #ifdef H5
				// 	this.innerAudioContext.playbackRate(1.0);
				// 	// #endif
				// 	// #ifndef H5
				// 	this.innerAudioContext.playbackRate = 1.0;
				// 	// #endif
				// 	this.speed = 1;
				// }

				this.$refs.popupBei.close()
			},
			goList() {
				uni.navigateBack()
			}
		},
		beforeDestroy() {
			// #ifdef MP-ALIPAY || MP-LARK
			this.innerAudioContext.destroy();
			// #endif
			// #ifdef H5
			this.innerAudioContext.pause();
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		text-align: center;
		padding: 70rpx 20rpx 20rpx 20rpx;
		color: #999999;

		.animation {
			margin: 30rpx auto 0;

			text-align: center;
			border-radius: 50px;


		}

		.animationActive {
			margin: 30rpx auto 0;
			text-align: center;
			border-radius: 50px;
			animation: rotateAnimation 3s linear infinite;
		}

		@keyframes rotateAnimation {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.popup-content {
			font-size: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 14rpx;

			text {
				color: #d0d0d0;
			}

			.textActive {
				color: #fff;
			}
		}

		.con-btn {
			color: #999999;
			font-size: 40rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.audio-content {
		width: 100%;

		box-sizing: border-box;

		.audio-progress {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 10px;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.audio-bar {
				flex: 1;
				padding: 0 26rpx;
				box-sizing: border-box;

				.audio-slider {
					margin: 0 !important;
				}
			}
		}

		.bar-tips {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 74rpx;
			// margin-bottom: 32rpx;
			color: #B8BECC;
			// font-size: 24rpx;
			line-height: 10rpx;
		}

		.play-box {
			display: flex;
			align-items: center;
			justify-content: center;
			// margin: 30rpx 0;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.play-btn {
			width: 120rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 64rpx;
			border: 8rpx solid #475266;
			border-radius: 50%;

			image {
				width: 96rpx;
				height: 96rpx;
			}
		}

		.audio-btn {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-evenly;


			image {
				width: 60rpx;
				height: 60rpx;
			}

			.btn-order {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 8rpx 0;
				width: 106px;
			}



			.play-list-text {
				/* position: absolute;
				bottom: 0;
				left: -11rpx; */
				color: #999999;
				font-size: 16px;
				text-align: center;
				margin: 0 10rpx;
			}



			.speed-text {
				position: absolute;
				top: 20rpx;
				right: 0;
				color: #475266;
				font-size: 16rpx;
				font-weight: 600;
			}
		}

	}
</style>